Page({
    data: {
        multiIndex: [0, 0, 0],
        nodes: [{
            name: 'div',
            attrs: {
                class: 'div_class',
                style: 'line-height: 60px; color: red;'
            },
            children: [{
                type: 'text',
                text: 'Hello&nbsp;World!'
            }]
        }],

        x: 60,
        y: 60,
        rotateVal: 0,
        rotateMax: 360,
        scalePercent: 1,
        scaleVal: 100,
        scaleMax: 200,
        imgURL: '',
    },

    chooseImg() {
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: (res) => {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                var tempFilePaths = res.tempFilePaths
                this.setData({
                    imgURL: tempFilePaths[0]
                })

                wx.getImageInfo({
                    src: tempFilePaths[0],
                    success: function (res) {
                        console.log(res.width)
                        console.log(res.height)
                    }
                })

            }
        })
    },

    reset() {
        this.setData({
            x: 60,
            y: 60,
            rotateVal: 0,
            scaleVal: 100,
            scalePercent: 1,
        })
    },

    /**缩放 */
    scale(e) {
        let scalePercent = (e.detail.value / 100).toFixed(1)

        this.setData({
            scalePercent: scalePercent
        })
    },

    /**旋转 */
    rotate(e) {
        this.setData({
            rotateVal: e.detail.value
        })  
    },

    getPosition() {

        var query = wx.createSelectorQuery()
        query.select('.move').boundingClientRect(function (rect) {
            rect.id      // 节点的ID
            rect.dataset // 节点的dataset
            rect.left    // 节点的左边界坐标
            rect.right   // 节点的右边界坐标
            rect.top     // 节点的上边界坐标
            rect.bottom  // 节点的下边界坐标
            rect.width   // 节点的宽度
            rect.height  // 节点的高度
            console.log('move', rect)
        })

        query.select('.bg_img').boundingClientRect(function (rect) {
            rect.id      // 节点的ID
            rect.dataset // 节点的dataset
            rect.left    // 节点的左边界坐标
            rect.right   // 节点的右边界坐标
            rect.top     // 节点的上边界坐标
            rect.bottom  // 节点的下边界坐标
            rect.width   // 节点的宽度
            rect.height  // 节点的高度
            console.log('bg_img', rect)
        }).exec()


    },


    canvasIdErrorCallback: function (e) {
        console.error(e.detail.errMsg)
    },

    onReady: function (e) {
        // 使用 wx.createContext 获取绘图上下文 context
        var context = wx.createCanvasContext('firstCanvas')

        context.setStrokeStyle("#00ff00")
        context.setLineWidth(5)
        context.rect(0, 0, 200, 200)
        context.stroke()
        context.setStrokeStyle("#ff0000")
        context.setLineWidth(2)
        context.moveTo(160, 100)
        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
        context.moveTo(140, 100)
        context.arc(100, 100, 40, 0, Math.PI, false)
        context.moveTo(85, 80)
        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
        context.moveTo(125, 80)
        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
        context.stroke()
        context.draw()
    },

    getInfo(e) {
        console.log(e)
    },

    scrollToSW: function () {
        wx.pageScrollTo({
            scrollTop: 34,
        })

        var query = wx.createSelectorQuery()
        query.select('.testSelector').boundingClientRect(function (rect) {
            rect.id      // 节点的ID
            rect.dataset // 节点的dataset
            rect.left    // 节点的左边界坐标
            rect.right   // 节点的右边界坐标
            rect.top     // 节点的上边界坐标
            rect.bottom  // 节点的下边界坐标
            rect.width   // 节点的宽度
            rect.height  // 节点的高度
            console.log(rect)
        }).exec()
        console.log(query.selectAll('.testSelector'))
    },
})